<template>
  <div class="annex padbottom">
    <h4>阶段分类1</h4>
    <van-swipe-cell>
      <div class="file-item">
        <div class="file-info">
          <div class="icon">
            <!-- <img src="@/assets/svg/word.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/excel.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/jpg.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/pdf.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/png.svg" class="icon-img"> -->
            <img src="@/assets/svg/unknown.svg" class="icon-img" />
          </div>
          <div class="content">
            <div class="file">附件名称名称名称名称</div>
            <div class="desc">
              <div class="name">张三</div>
              <div class="time">2021-06-29</div>
            </div>
          </div>
        </div>
        <div class="download">
          <span class="font_family icon-xiazai"></span>
        </div>
      </div>
      <template #right>
        <van-button
          @click="handleDel"
          square
          type="danger"
          text="删除"
          class="delete-btn"
        />
      </template>
    </van-swipe-cell>
    <van-swipe-cell>
      <div class="file-item">
        <div class="file-info">
          <div class="icon">
            <!-- <img src="@/assets/svg/word.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/excel.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/jpg.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/pdf.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/png.svg" class="icon-img"> -->
            <img src="@/assets/svg/unknown.svg" class="icon-img" />
          </div>
          <div class="content">
            <div class="file">附件名称名称名称名称</div>
            <div class="desc">
              <div class="name">张三</div>
              <div class="time">2021-06-29</div>
            </div>
          </div>
        </div>
        <div class="download">
          <span class="font_family icon-xiazai"></span>
        </div>
      </div>
      <template #right>
        <van-button
          @click="handleDel"
          square
          type="danger"
          text="删除"
          class="delete-btn"
        />
      </template>
    </van-swipe-cell>
    <h4>阶段分类1</h4>
    <van-swipe-cell>
      <div class="file-item">
        <div class="file-info">
          <div class="icon">
            <!-- <img src="@/assets/svg/word.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/excel.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/jpg.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/pdf.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/png.svg" class="icon-img"> -->
            <img src="@/assets/svg/unknown.svg" class="icon-img" />
          </div>
          <div class="content">
            <div class="file">附件名称名称名称名称</div>
            <div class="desc">
              <div class="name">张三</div>
              <div class="time">2021-06-29</div>
            </div>
          </div>
        </div>
        <div class="download">
          <span class="font_family icon-xiazai"></span>
        </div>
      </div>
      <template #right>
        <van-button
          @click="handleDel"
          square
          type="danger"
          text="删除"
          class="delete-btn"
        />
      </template>
    </van-swipe-cell>
    <van-swipe-cell>
      <div class="file-item">
        <div class="file-info">
          <div class="icon">
            <!-- <img src="@/assets/svg/word.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/excel.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/jpg.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/pdf.svg" class="icon-img"> -->
            <!-- <img src="@/assets/svg/png.svg" class="icon-img"> -->
            <img src="@/assets/svg/unknown.svg" class="icon-img" />
          </div>
          <div class="content">
            <div class="file">附件名称名称名称名称</div>
            <div class="desc">
              <div class="name">张三</div>
              <div class="time">2021-06-29</div>
            </div>
          </div>
        </div>
        <div class="download">
          <span class="font_family icon-xiazai"></span>
        </div>
      </div>
      <template #right>
        <van-button
          @click="handleDel"
          square
          type="danger"
          text="删除"
          class="delete-btn"
        />
      </template>
    </van-swipe-cell>
    <div class="uploadFile">
      <img src="@/assets/svg/xinjian_list.svg" alt="">
      <input @change="upload" multiple type="file" accept=".docx,.doc,.pdf,.xlsx,.jpg,.png" ref="inputer">
    </div>
    <div class="form-btn">
      <div class="btn btn-color1" @click="handleMoreOpera">更多操作</div>
      <!-- <div class="btn btn-color2">保存</div> -->
      <div class="btn btn-color3" @click="submit">提交</div>
    </div>
    <van-action-sheet
      v-model="showMoreOpera"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @cancel="onCancel"
    />
  </div>

  <!-- 上传文件  加号 
    参数：
    当前服务单id
    当前审批节点
    文档信息
    当前用户id

  -->

</template>
<script>
import { Toast } from "vant";
export default {
  props:['id'],   //服务单id
  data() {
    return {
      actions: [{ name: "OA流程" }, { name: "审批记录" }],
      showMoreOpera: false,
      formData:'',
      file:''
    };
  },
  methods: {
    upload(e){
      var file = e.target.files;
      this.file = file[0]
      console.log(this.file)
      // let size = Math.floor(this.file.size/1024);
      this.formData = new FormData()
      this.formData.append('file',this.file)
      // console.log(size)
      console.log(this.formData.get('file'))
    },
    handleDel() {},
    handleMoreOpera() {
      this.showMoreOpera = true;
    },
    onCancel() {
      this.showMoreOpera = false;
    },
    submit() {
      Toast("提交");
    },
    onSelect(active, index) {
      console.log(active, index);
      if (active.name == "审批记录") {
        this.$router.push({
          path: "/service/approvalRecord",
          query: {
            id: this.id,
          },
        });
      } else if (active.name == "OA流程") {
        this.$router.push({
          path: "/service/oaFlow",
          query: {
            id: this.id,
          },
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.annex {
  height: auto;
  padding-top: 10px;
  &.padbottom {
    padding-bottom: 100px;
  }
  h4 {
    color: #313541;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 16px;
  }
  .file-item {
    background: #fff;
    padding: 0 15px;
    margin-bottom: 10px;
    .file-info {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 77px;
      border-bottom: 1px solid #f2f2f2;
      .icon {
        width: 40px;
      }
      .icon-img {
        width: 40px;
      }
      .content {
        flex: 1;
        margin-left: 10px;
      }
      .file {
        font-size: 16px;
        font-weight: bold;
        color: #313541;
      }
      .desc {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 6px;
      }
      .name {
        font-size: 12px;
        color: #313541;
      }
      .time {
        font-size: 12px;
        color: #939dad;
      }
    }
    .download {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      .icon-xiazai {
        font-size: 17px;
        color: #011445;
      }
    }
  }
  .form-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: #fff;
    height: 34px;
    padding: 13px 15px;
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
    .btn {
      flex: 1;
      height: 34px;
      line-height: 34px;
      text-align: center;
      font-size: 14px;
      margin-right: 6px;
      border-radius: 5px;
      &:last-child {
        margin-right: 0;
      }
    }
    .btn-color1 {
      background: rgba(147, 157, 173, 0.18);
      color: #313541;
    }
    .btn-color3 {
      background: #009966;
      color: #fff;
    }
  }
  .uploadFile{
    position: fixed;
    bottom: 70px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #009966;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    box-shadow: 0 5px 10px rgba(0, 153, 102, .2);
    img{
      width: 40px;
    }
    input{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      z-index: 10;
      opacity: 0;
    }
  }
}
.delete-btn {
  height: 100%;
}
</style>